<template>
  <el-dialog
    @close="close"
    title="账号管理"
    :visible.sync="dialog"
    width="32%"
  >
    <el-form size="mini" :model="formInline" :rules="rules" ref="formInline" label-width="100px" class="acc_for">
      <el-form-item label="绑定手机：" prop="operation" clarr="acc_inp_con">
          {{formInline.phone}}
      </el-form-item>
      <div class="change_member">
        <el-button style="background:dodgerblue;color:white" @click="updatePhone">更换手机号 </el-button>
      </div>
      <el-form-item label="绑定QQ号：" prop="dictKey" clarr="acc_inp_con">
      </el-form-item>
      <el-form-item label="绑定微信号：" prop="dictValue" clarr="acc_inp_con">
      </el-form-item>
      <el-form-item label="账号密码：" prop="description" clarr="acc_inp_con" >
      </el-form-item>
      <div class="up_password">
        <el-button @click="updatePassword" style="background:dodgerblue;color:white">重置密码 </el-button>
      </div>


    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button :disabled="btnLoading" @click="dialog = false">取 消</el-button>
      <el-button type="primary" :loading="btnLoading" @click="onSubmit">确 定</el-button>
    </span>
  </el-dialog>

</template>
<script>
  import {bindPhoneAPI , updatePasswordAPI} from '@/api/person'

  export default {
    name: 'Account',

    props: {
      dialog_: {
        type: Boolean,
        default: false
      },
      phone: {
        type: Number,
        default: null
      },
      id: {
        type: Number,
        default: null
      }
    },
    data() {
      var validateSort = (rule, value, callback) => {``
        var reg = /^[0-9]\d*$/
        if (value === null || value === '' | value === undefined) {
          callback()
        } else if (!reg.test(value)) {
          return callback(new Error('请输入正确的数字'))
        } else {
          callback()
        }
      }
      return {
        props: {
          label: 'title',
          children: 'children'
        },
        keyDisable:false,
        dialog: false,
        formInline: {
          id: this.id,
          phone:this.phone
        },
        btnLoading: false,
        treeData: [],
        rules: {
          dictKey: [
            { required: true, message: '请填写业务配置名称', trigger: 'blur' }
          ],
          dictValue: [
            { required: true, message: '请填写业务配置值', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请填写描述', trigger: 'blur' }
          ],
          sort: [
            { validator: validateSort, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      updatePhone(obj){
        this.$prompt('修改绑定手机号', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '字数不能多于20个',
          inputType:'input',
          inputPattern: /^\S{1,20}$/
        }).then(({ value }) => {
          let params = {
            id:this.id,
            phone:value
          }
          bindPhoneAPI(params).then(res => {
            if (res.code === 0) {
              this.$message.success("更新成功")
              this.$emit('close')
              this.$emit('success')
            } else {
              this.$message.error("更新失败")
            }
          })
        }).catch(() => {
          /*this.$message({
            type: 'info',
            message: '取消输入'
          });*/
        });
      },
      updatePassword(obj){
        this.$prompt('修改密码', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputErrorMessage: '字数不能多于20个',
          inputType:'input',
          inputPattern: /^\S{1,20}$/
        }).then(({ value }) => {
          let params = {
            id:this.id,
            password:value
          }
          updatePasswordAPI(params).then(res => {
            if (res.code === 0) {
              this.$message.success("更新成功")
              this.$emit('close')
              this.$emit('success')
            } else {
              this.$message.error("更新失败")
            }
          })
        }).catch(() => {
          /*this.$message({
            type: 'info',
            message: '取消输入'
          });*/
        });
      },
      close() {
        this.$emit('close')
      },
      // 提交
      onSubmit() {
        // this.$refs.formInline.validate((valid) => {
        //   if (valid) {
        //     this.btnLoading = true
        //     globalAddAPI(this.formInline).then(res => {
        //       this.btnLoading = false
        //       if (res.code === 200) {
        //         this.$message.success(res.message)
        //         this.$emit('success')
        //         this.dialog = false
        //       } else {
        //         this.$message.error(res.message)
        //       }
        //     })
        //   } else {
        //     this.$message.warning("请填写完整的信息")
        //     return false;
        //   }
        // });

      },
    },
    mounted() {
      this.dialog = this.dialog_
    }
  }
</script>
<style>
  .acc_inu{
    width:200px;
  }
  .acc_for{
    position:relative;
  }
  .change_member{
    position:absolute;
    top: -4px;
    left: 412px;
  }
  .up_password{
    position:absolute;
    top: 165px;
    left: 412px;
  }
  .acc_inp_con{
      margin-top: 20px;
  }
</style>
